<template>
	<view>
		<view class="po-r">
			<u-swiper :list="banner" keyName="url" height="750rpx" @change="e => currentNum = e.current" radius="0" v-if="adType == 0">
				<view slot="indicator" class="indicator-num">
					<view class="indicator-num__text">{{ currentNum + 1 }}/{{ banner.length }}</view>
				</view>
			</u-swiper>
			<video :src="videoUrl" :autoplay="true" style="width: 100%;height: 750rpx;" :controls="false" :loop="true" v-else></video>
			<cover-view class="box-1" v-if="duration">
				<cover-view >广告 {{duration}}s</cover-view>
			</cover-view>
			<cover-view class="box-9" v-else @click="goNext">
				<cover-image style="width: 100%;height: 100%;" src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/icon_quxiao.png" @click="goNext"></cover-image>
			</cover-view>
		</view>

		<view class="content px-20 py-32" v-if="content">
			<view class="text-32 font-700">
				{{content.title}}
			</view>
			<view class="mt-32 mb-16">
				<u-line color="#F3F3F3"></u-line>
			</view>
			<view class=" ">
				{{content.detail}}
			</view>
			<view class="mt-28" style="background: #F0F7FF;padding: 16rpx;" v-if="content.productsSpu">
				<view class="box-2 text-24 text-center text-FFF">
					产品链接
				</view>
				<view class="flex align-center mt-24">
					<image :src="content.productsSpu.prodIcons" mode="" style="width: 176rpx;height: 176rpx;"></image>
					<view class="ml-20 flex flex_c justify-between align-start"
						style="width: calc(100% - 176rpx);height: 176rpx;">
						<view class=" font-700">
							{{content.productsSpu.prodName}}
						</view>
						<view class="flex align-center justify-between" style="width: 100%;">
							<view class="text-32" style="color: #FFA535;">
								￥{{content.productsSpu.price}}
							</view>
							<view class="box-3 text-center text-FFF" @click="goDetail">
								查看详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				currentNum: 0,
				content: null,
				duration: null,
				timer: null,
				adType:null,
				videoUrl:''
			};
		},
		onLoad() {
			this.getData()
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			goDetail() {
				clearInterval(this.timer)
				uni.redirectTo({
					url: `/pages/commodity/detail?id=${this.content.productsSpu.id}&storeId=${this.content.storeId}`
				})
			},
			getFileType(fileName) {
				// 获取文件名的后缀部分
				const fileExtension = fileName.split('.').pop().toLowerCase();

				// 常见的图片文件后缀
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif'];

				// 常见的视频文件后缀
				const videoExtensions = ['mp4', 'avi', 'mov', 'wmv'];

				// 判断文件后缀属于哪个类型
				if (imageExtensions.includes(fileExtension)) {
					return 'image';
				} else if (videoExtensions.includes(fileExtension)) {
					return 'video';
				} else {
					return 'unknown';
				}
			},
			goNext() {
				uni.redirectTo({
					url: '/pages/mine/signIn'
				})
			},
			getData() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.$Api.advertising.advertrandom({
							lat: res.latitude,
							lon: res.longitude
						}).then(AD => {
							console.log(AD, '范围内广告')
							if (!AD.data) {
								clearInterval(this.timer)
								uni.redirectTo({
									url: '/pages/mine/signIn'
								})
							}
							this.banner = []
							
							this.adType = AD.data.adType
							let arr = AD.data.resource.split(',')
							if(AD.data.adType == 0){
								arr.forEach(item => {
									let obj = {
										url: item,
										type: this.getFileType(item)
									}
									this.banner.push(obj)
								})
							}else{
								this.videoUrl = arr[0]
							}

							this.content = AD.data
							if (this.content.productsSpu) {
								this.content.productsSpu.prodIcons = this.content.productsSpu.prodIcons
									.split(',')[0]
							}

							this.$Api.common.configInfo('ADdisplaytime').then(res => {
								this.duration = Number(res.data.configValue)
								this.timer = setInterval(() => {
									this.duration--
									if (this.duration <= 0) {
										this.$Api.advertising.record(this.content.id)
										clearInterval(this.timer)
										this.duration = null
									}
								}, 1000)
							})
						})
					},
					fail: () => {
						uni.redirectTo({
							url: '/pages/mine/signIn'
						})
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.box-1 {
		width: 160rpx;
		height: 44rpx;
		background: rgbg(0, 0, 0,.5);
		border-radius: 8rpx;
		position: absolute;
		top: 106rpx;
		left: 32rpx;
		line-height: 44rpx;
		z-index: 999;
		font-size: 24rpx;
		text-align: center;
		color: #FFF;
	}

	.box-9 {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 106rpx;
		left: 32rpx;
		z-index: 999;
	}

	.indicator-num__text {
		width: 96rpx;
		height: 48rpx;
		border-radius: 216rpx 216rpx 216rpx 216rpx;
		background-color: rgba(0, 0, 0, 0.3);
		text-align: center;
		line-height: 48rpx;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.content {
		border-radius: 24rpx 24rpx 0 0;
		background: #fff;
		position: relative;
		top: -24rpx;
		width: 100%;
	}

	.box-2 {
		width: 120rpx;
		height: 46rpx;
		border-radius: 12rpx;
		background: rgba(0, 0, 0, 0.2);
		line-height: 46rpx;
	}

	.box-3 {
		width: 160rpx;
		height: 64rpx;
		background: #89A8CB;
		line-height: 64rpx;
		border-radius: 32rpx;
	}
</style>